<template>
  <myTable class="table" :columnData="columnData" :tableData="tableData"></myTable>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
import myTable from '@/components/table/index.vue'
import { columnDataType, tableDataType } from '@/components/table/index.d'
import { getUserList } from '@/request/api'


onMounted(() => {
  getList()
})

const getList = () => {
  getUserList().then((res) => {
    console.log(res);
    tableData.list = res.data
  })
}

// 分页器相关参数
const currentPage = reactive({
  size: 10,
  current: 1,
  total: 100
})


// 表格
const columnData = reactive<columnDataType<any>[]>([
  {
    property: 'user_id',
    label: '用户编号',
    width: 100
  },
  {
    property: 'name',
    label: '用户名',
  },
  {
    property: 'password',
    label: '密码',
  },
  {
    property: 'phone',
    label: '手机号'
  },
  {
    property: 'email',
    label: '邮箱'
  }
])

// 表格
const tableData = reactive<tableDataType<any>>({
  list: [],
  needPaging: false,
  paging: {
    total: currentPage.total,
    currentPage: currentPage.current,
    changeFn: (val: number) => {
      console.log(val);

    },
    sizeFn: (val: number) => {
      console.log(val);

    }
  }
})

</script>

<style scoped>
.search-container {
  border-bottom: 3px solid rgb(245, 245, 245);
  margin-bottom: 30px;
}

.search-form {
  display: flex;
  align-items: center;
  height: 50px;
}

.table {
  border-top: 3px solid rgb(245, 245, 245);
}
</style>